import React, { useState, useEffect,useImperativeHandle,forwardRef } from 'react';
import '../svg/index.css'
import request from "../../utils/request";
const CaptchaSvg = forwardRef((_, ref) => {
    const [svg, setSvg] = useState(null);
    const getCaptcha = () => request({ url: '/getCaptcha' })
    const getCaptchaData = () => {
        getCaptcha().then(res => {
            setSvg(res)
        })
    }
    useEffect(() => {
        getCaptchaData()
    }, []);
    useImperativeHandle(ref, () => ({
        refreshCode: getCaptchaData
    }))
    return (
        <div
            className="captcha-box"
            onClick={ getCaptchaData }
            dangerouslySetInnerHTML={{ __html: svg }}
            style={{ display: 'inline-block' }}
        />
    );
})


export default CaptchaSvg;
